<template>
  <div class="inpourhistory">
    <div class="container search-bar"></div>
    <div class="scroll-container">
      <div class="order-list"></div>
    </div>

    <div style="display: none" id="templates">
      <div class="container order-item">
        <div class="order-detail-desp">
          <div class="order-bd">
            <div class="inpour-title">充值</div>
            <div class="order-detail-item">
              付款时间：<span class="order-datePaid"></span>
            </div>
          </div>
          <div class="order-ft">
            <div class="order-status">
              <span class="tag-status">--</span>
            </div>
            <div class="order-fee">
              <span class="tag-fee">--</span>
            </div>
          </div>
        </div>
        <div class="order-detail-item">
          <span class="order-remark"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped lang="less">
.container {
  background: #fff;
  font-size: 1em;
}

.order-list {
  margin-bottom: 6px;
}

.order-item {
  margin-bottom: 5px;
  padding: 10px;
  border: 1px solid #eee;
  box-shadow: 0px 1px 1px #ccc;
}

.order-dateStarted {
  color: #666;
}

.order-detail-desp {
  -webkit-flex: flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-bd,
.order-ft {
  flex: none;
}

.order-detail-item {
  font-size: 0.9em;
  color: #888;
}

.order-ft {
  text-align: center;
}

.order-status {
  color: rgb(241, 63, 64);
}

.btn-area {
  padding: 8px 32px;
}

.btn-area .btn-primary {
  color: #fff;
  background: #5089cf;
}

.btn-area .btn-disabled {
  color: #ccc;
  background: #fff;
}

.weui-btn:after {
  border: none;
}

.order-status .tag-status {
  display: inline-block;
  border-radius: 8px;
  font-size: 1em;
}

.order-fee .tag-fee {
  display: inline-block;
  border-radius: 8xp;
  font-size: 1em;
  color: #5089cf;
}

.status-charging {
  background: #aeae59;
  color: #fff;
}

.status-all {
  background: #5059ae;
  color: #fff;
}

.status-free {
  background: #50ae59;
  color: #fff;
}

.status-error {
  background: #ae5059;
  color: #fff;
}

.status-offline {
  background: #eee;
  color: #999;
}
</style>
